<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Three column fluid layout with rounded content corners and 100% height and width | Strictly CSS </title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="shortcut icon" href="/favicon.ico" />
<script type="text/javascript" src="scripts/jquery.ui-1.5.2/jquery-1.2.6.js"></script>
<script type="text/javascript" src="scripts/jquery.ui-1.5.2/ui/ui.core.js"></script>
<script type="text/javascript" src="scripts/jquery.ui-1.5.2/ui/ui.resizable.js"></script>
<script type="text/javascript">
jQuery.layout = function(options){
	jQuery.layout.options = options;
	$(options.container).attr('id', options.prefix + 'container');
	$('<div></div>').attr('id',options.prefix + 'header').html('header').appendTo(options.container);
	$('<div></div>').attr('id',options.prefix + 'navigation').html('<ul></ul>').appendTo(options.container);
	$('<div></div>').attr('id',options.prefix + 'subnavigation').html('subnav').appendTo(options.container);
	$('<div></div>').attr('id',options.prefix + 'content').html('content').appendTo(options.container);
	$('<div></div>').attr('id',options.prefix + 'footer').html('footer').appendTo(options.container);
};

jQuery.layout.load = function(url){
	$('div#' + jQuery.layout.options.prefix + 'content').load(url);
};

jQuery.layout.navigation = {
		init: function(c){
			this.container = c;
		},
		add: function(label, location){
			alert('adding ' + label);
			$('<a></a>').html(label)
				.attr('href', location)
				.attr('class', 'menu')
				.appendTo(
					$('<li></li>').appendTo($(this.container).find('ul'))
				).click(function(){
					$.layout.load(location);
					return false;
				});
		},
		addJSON: function(json){
			for (i=0; i<json.length; i++){
			alert('adding ' + json[i].label);
			$('<a></a>').html(json[i].label)
				.attr('href', json[i].url)
				.appendTo(
					$('<li></li>').appendTo($(this.container).find('ul'))
				).click(function(){
					$.layout.load($(this).attr('href'));
					return false;
				});
			}
		},
		container: null,
};

jQuery.layout.refresh = function(url){
	alert('refreshing');
};

$(document).ready(function(){
	$.layout({
		container: $('body'),
		prefix: 'layout-'
	});

	var menu = [
		{label:'file',url:'test.htm'},
		{label:'edit',url:'test2.htm'}
	];

	$.layout.navigation.init($('div#' + $.layout.options.prefix + 'navigation'));
	$.layout.navigation.addJSON(menu);
});
</script>

<script type="text/javascript">
</script>
</head>
<body>
<input type="button" onClick="$.layout.load('test.htm');" />
</body>
<style type="text/css">
/*
CSS-file for Strictly CSS three column layout 2006
http://www.strictlycss.com
Developed by Eivind Savio
*/
* /*Set's border, padding and margin to 0 for all values*/
{
padding: 0;
margin: 0;
border: 0;
width: 100%;
height: 100%;
}
body, html {
color: #000; 
font-family: Verdana, Arial, Tahoma, sans-serif;
height: 100%;
overflow: hidden;
width: 100%;
}
body {
font-size: 70%;
min-width: 760px;
overflow: hidden;
}

#layout-header {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 30px;
	background: #f3f3f3;
}

#layout-navigation {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 30px;
	height: 30px;
	background: #b3b3b3;
}


#layout-navigation ul li {
	float: left;
	width: auto;
	margin: 0px 20px 0px 20px;
}

#layout-content {
	position: absolute;
	left: 0px;
	right: 0px;
	bottom: 30px;
	top: 60px;
	background: #f3f3f3;	
}

#layout-footer {
	position: absolute;
	bottom: 0px;
	height: 30px;
	left: 0px;
	right: 0px;
	background: #b3b3b3;
}
</style>
</html>